<template>
  <div class="dialog">
    <el-dialog
      :title="dialog.title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      :visible.sync="dialog.show"
    >
      <el-form
        ref="MailForm"
        :rules="rules"
        :model="MailForm"
        label-width="100px"
      >
        <el-form-item label="选择：">
          <el-radio-group
            v-model="checked"
            v-for="item in workOrderList"
            :key="item.label"
            @change="qiehua(item.label)"
          >
            <el-radio-button :label="item.label">
              {{item.value}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="play_id" v-show="checkdgwj">
          <el-input
            style="margin-top: 15px"
            v-model.number="MailForm.play_id"
            placeholder="请输入单个玩家id"
          ></el-input>
        </el-form-item>
        <el-form-item prop="play_ids" v-show="checkplwj">
          <el-input
            style="margin-top: 15px"
            v-model.number="MailForm.play_ids"
            placeholder="请批量输入玩家id"
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkedServer" v-show="checkserver">
          <div style="margin-top: 15px">
            <span>请选择发送的服务器：</span>
             <Server ref="headerChild" />
          </div>
        </el-form-item>
        <el-form-item label="标题：" prop="title">
          <el-input v-model="MailForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容：" prop="content">
          <el-input v-model="MailForm.content"></el-input>
        </el-form-item>
        <el-form-item label="发送时间：" prop="send_time">
          <el-date-picker
            v-model="MailForm.send_time"
            type="datetime"
            value-format="timestamp"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发送人：" prop="sendpeople">
          <el-input v-model="MailForm.sendpeople"></el-input>
        </el-form-item>
        <el-form-item label="附件：" prop="role_id">
          <el-input
            style="width: 60%"
            placeholder="请输入物品名称或龙的ID"
            v-model.number="MailForm.role_id"
          ></el-input>
          <span style="margin-left: 20px; padding: 10px; font-size: 15px"
          >共</span>
          <el-input-number
            style="width: 15%"
            v-model="MailForm.num"
            controls-position="right"
            :min="1"
            :max="10"
          ></el-input-number>
          <span style="padding: 10px; font-size: 15px">个</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleclose()">取 消</el-button>
        <el-button type="primary" @click="handleAddAndEdit()"
        >立即发送</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Server from "../serverd/Server"
export default {
  name: "MailDialog",
  components:{
    Server
  },
  // 获取父亲传过来的值
  props: {
    dialog: Object,
  },
  data() {
    return {
      dialogVisible: false,
      checkdgwj: true,
      checked: 1,
      checkplwj: false,
      checkserver: false,
      MailForm: {
        title: "",
        play_id: "",
        content: "",
        send_time: "",
        sendpeople: "",
        num: 1,
        role_id: "",
        play_ids: "",
        server_id:[],
      },
      workOrderList: [
        {
          label: 1,
          value: "单个玩家",
        },
        {
          label: 2,
          value: "批量玩家",
        },
        {
          label: 3,
          value: "全服玩家",
        },
      ],
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" }
        ],
        play_id: [
          {type: "number",required: true,message: "请输入玩家ID",trigger: "blur"},
        ],
        play_ids: [
          {type: "number",required: true,message: "请输入玩家ID",trigger: "blur",},
        ],
        content: [
          { required: true, message: "请输入内容", trigger: "blur" }
        ],
        send_time: [
          { required: true, message: "请输入时间", trigger: "blur" }
        ],
        sendpeople: [
          { required: true, message: "请输入发送人名称", trigger: "blur" },
        ],
        role_id: [
          { required: true,type: "number", message: "请输入发送人名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //input输入分割
    // myFunction(){
    //   this.MailForm.play_ids=this.MailForm.play_ids.replace(/([^_-\W]{5})/g,"$1,")
    // },
    handleAddAndEdit() {
      this.dialog.show = false;
      this.MailForm.server_id=this.$refs.headerChild.server_id
      let obj={
        title:this.MailForm.title,
        play_id:this.MailForm.play_id,
        content:this.MailForm.content,
        send_time:this.MailForm.send_time,
        sendpeople:this.MailForm.sendpeople,
        num:this.MailForm.num,
        role_id:this.MailForm.role_id,
        play_ids:this.MailForm.play_ids,
        server_id:this.MailForm.server_id
      }
      var arr=[];
      arr.push(obj)
      this.$emit("update", arr);
    },
    handleclose() {
      this.dialog.show = false;
    },
    qiehua(value) {
      if (value == 1) {
        this.checkdgwj = true;
      } else {
        this.checkdgwj = false;
      }
      if (value == 2) {
        this.checkplwj = true;
      } else {
        this.checkplwj = false;
      }
      if (value == 3) {
        this.checkserver = true;
      } else {
        this.checkserver = false;
      }
    },
  },
};
</script>
<style scoped>
.upload {
  width: 20px;
  height: 20px;
  margin-top: 10px;
}
</style>